import router from './router/index';
<template>
  <div id="movie-app">
    <nav>
      <div class="logo">MovieApp</div>
      <router-link to="/" class="home">首页</router-link>
      <router-link to="/search">搜索页</router-link>
      <router-link to="/upload">上传电影</router-link>
      <router-link to="/login" class="login">登录</router-link>
    </nav>
    <router-view class="rv" />
  </div>
</template>

<style scoped>
#movie-app {
  width: 100vw;
  height: 100vh;
  border: 2px solid black;
  display: flex;
  justify-content: stretch;
  border-radius: 10px;
  overflow: hidden;
}
nav {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 100%;
  background: #1a1a1a;
  color: white;
  padding: 20px 0;
  box-sizing: border-box;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.logo {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  color: #ffcc00;
}
.rv {
  flex: 1;
  padding: 20px;
  box-sizing: border-box;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  background: #f5f5f5;
}
a {
  display: block;
  text-align: center;
  padding: 15px;
  margin: 5px 20px;
  border-radius: 5px;
  color: white;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
  font-family: 'Arial', sans-serif;
}
a.router-link-active {
  background: rgb(219, 92, 92);
}
a:hover {
  background: #333333;
  color: #ffcc00;
}
a.home {
  margin-top: 30px;
}
a.login {
  margin-top: auto;
  margin-bottom: 30px;
}
</style>
